<template>
  <div class="auditpage">
    <div class="auditpage_main">
      <div class="card_top">
        <el-card :body-style="{ padding: '10' }" style="text-align: left;">
          <div class="taber">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="待审核" name="1">
                <div>
                  <el-table
                    v-loading="loading"
                    :data="tableData"
                    style="width: 100%"
                    :cell-style="rowClass"
                    :header-cell-style="headClass"
                    ref="singleTable"
                    @current-change="handleCurrentChange"
                    highlight-current-row
                  >
                    <!-- fixed -->
                    <el-table-column prop="date" label="发布时间及编码">
                      <template slot-scope="scope">
                        <div>
                          {{
                            scope.row.start_time
                              | formatTime("yyyy-MM-dd hh:mm:ss")
                          }}<br />/{{ scope.row.id }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="url" label="主图">
                      <template slot-scope="scope">
                        <a :href="scope.row.goods_url" target="_blank">
                          <el-image
                            style="width:100px;height:100px"
                            fit
                            :src="scope.row.goods_img"
                            lazy
                          >
                            <div slot="placeholder" class="image-slot">
                              <!-- 加载中<span class="dot">...</span> -->
                              <img
                                style="display:inline-block;width:100%;height:100%"
                                :src="require('@/assets/images/download.gif')"
                                alt=""
                                srcset=""
                              />
                            </div>
                          </el-image>
                        </a>
                      </template>
                    </el-table-column>
                    <el-table-column prop="title" label="商品信息">
                      <template slot-scope="scope">
                        <a :href="scope.row.goods_url" target="_blank">
                          <div style="text-align:center">
                            {{ scope.row.goods_short_title }}
                          </div>
                        </a>
                        <div
                          style="display:flex;justify-content: space-around;align-items: center;"
                        >
                          <span
                            style="border-right:1px solid #c3c3c3;padding:0 7px 0 0"
                          >
                            ￥ {{ Math.round(scope.row.goods_price) }}
                          </span>
                          <span
                            style="border-right:1px solid #c3c3c3;color:red;padding:0 7px 0 0"
                          >
                            ￥ {{ Math.round(scope.row.after_coupon_price) }}
                          </span>
                          <span style="color:#FABC70;">
                            {{ scope.row.commission_than }}%
                          </span>
                          <span
                            style="color:#FABC70;border:2px solid #FABC70;font-size:16px;padding:0 3px"
                            >定</span
                          >
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="title" label="申请人信息">
                      <template slot-scope="scope">
                        <el-tooltip placement="right" effect="light">
                          <div slot="content">
                            <div>申请用户账号:{{ scope.row.phone }}</div>
                            <div>
                              <div>团队头像:</div>
                              <div>
                                <el-image
                                  style="width: 70px; height: 70px"
                                  :src="scope.row.team_img"
                                  fit="cover"
                                ></el-image>
                              </div>
                            </div>
                            <div>团队名称:{{ scope.row.team_name }}</div>
                            <div>团队介绍:{{ scope.row.team_desc }}</div>
                            <div>
                              申请推广商品数:{{
                                scope.row.today_sq_num +
                                  "/" +
                                  scope.row.week_sq_num +
                                  "/" +
                                  scope.row.day_sq_num
                              }}
                            </div>
                            <div>
                              申请推广通过率:
                              <span v-if="scope.row.today_sq_num > 0">
                                {{
                                  (
                                    (scope.row.today_success_num /
                                      scope.row.today_sq_num) *
                                    100
                                  ).toFixed(2)
                                }}%/
                              </span>
                              <span v-else>
                                0%/
                              </span>
                              <span v-if="scope.row.week_sq_num > 0">
                                {{
                                  (
                                    (scope.row.week_success_num /
                                      scope.row.week_sq_num) *
                                    100
                                  ).toFixed(2)
                                }}%/
                              </span>
                              <span v-else>
                                0%/
                              </span>
                              <span v-if="scope.row.day_sq_num > 0">
                                {{
                                  (
                                    (scope.row.day_success_num /
                                      scope.row.day_sq_num) *
                                    100
                                  ).toFixed(2)
                                }}%
                              </span>
                              <span v-else>
                                0%/
                              </span>
                            </div>
                            <div>
                              本月 推广商品平均销量:{{
                                Math.round(scope.row.avg_goods_xl)
                              }}
                            </div>
                            <div>
                              本月 推广商品平均领券量 :{{
                                Math.round(scope.row.avg_coupon_num)
                              }}
                            </div>
                          </div>
                          <div class="applyuser">
                            {{ scope.row.phone }}
                          </div>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                    <el-table-column prop="copywriting" label="文案">
                      <template slot-scope="scope">
                        <div
                          style="max-height:136px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;"
                        >
                          {{ scope.row.copywriting }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="coupon" label="优惠卷">
                      <template slot-scope="scope">
                        <div style="margin-top: 3px;">
                          <a :href="scope.row.coupon_url" target="_blank">
                            <span
                              style="background:red;border-top-left-radius: 5px; border-bottom-left-radius: 5px;padding: 5px 9px;color:white;text-align:center"
                              >劵</span
                            ><span
                              style="border:1px solid red;padding: 4px 8px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;"
                            >
                              ￥ {{ scope.row.coupon_price }}</span
                            >
                          </a>
                        </div>
                        <el-button type="text">
                          <a :href="scope.row.coupon_url" target="_blank">
                            <el-tag>领取</el-tag>
                          </a>
                        </el-button>
                        <div>
                          <span style="color:#FA624A">{{
                            scope.row.coupon_collar_count
                          }}</span
                          >/{{ scope.row.coupon_num }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="time" label="起止时间">
                      <template slot-scope="scope">
                        <span>{{
                          scope.row.start_time
                            | formatTime("yyyy-MM-dd hh:mm:ss")
                        }}</span>
                        <br />至
                        <span>{{
                          scope.row.goods_end_time
                            | formatTime("yyyy-MM-dd hh:mm:ss")
                        }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态">
                      <template slot-scope="scope">
                        <span v-if="scope.row.status == 2">
                          <el-tag type="success">审核通过</el-tag>
                        </span>
                        <span v-else-if="scope.row.status == 1">
                          <el-tag type="info">待审核</el-tag>
                        </span>
                        <span v-else>
                          <el-tag type="danger">驳回审核</el-tag>
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="action" label="操作">
                      <template slot-scope="scope">
                        <div>
                          <el-button
                            @click.native.prevent="pass(scope.row)"
                            type="text"
                            size="small"
                            >审核通过
                          </el-button>
                        </div>
                        <div>
                          <el-button
                            style="margin-left: 0px;"
                            @click.native.prevent="openreason(scope.row)"
                            type="text"
                            size="small"
                            >审核拒绝
                          </el-button>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="width:100%;text-align:right">
                    <!-- 分页器 -->
                    <!-- @size-change="handleSizeChange" -->
                    <!-- background -->
                    <el-pagination
                      @current-change="handleCurrentChange2"
                      :current-page="currentPage"
                      :page-size="pagesize"
                      :pager-count="11"
                      layout="total, prev, pager, next, jumper"
                      :total="count"
                    >
                      <!-- :page-sizes="[100, 200, 300, 400]" -->
                    </el-pagination>
                  </div>
                </div>
                <el-dialog
                  title="拒绝理由"
                  :visible.sync="dialogshow"
                  width="500px"
                  @close="closedialog"
                >
                  <div>
                    <el-autocomplete
                      style="width:400px"
                      class="inline-input"
                      v-model="reason"
                      :fetch-suggestions="querySearch"
                      placeholder="请输入拒绝内容"
                      @select="handleSelect"
                    ></el-autocomplete>
                  </div>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="closedialog">取 消</el-button>
                    <el-button type="primary" @click="doreject"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
              </el-tab-pane>
              <el-tab-pane label="我审核的" name="2">
                <div>
                  <el-table
                    v-loading="loading"
                    :data="tableData2"
                    style="width: 100%"
                    :cell-style="rowClass"
                    :header-cell-style="headClass"
                    ref="singleTable"
                    @current-change="handleCurrentChange"
                    highlight-current-row
                  >
                    <el-table-column prop="date" label="分类及押金">
                      <template slot-scope="scope">
                        <div>{{ scope.row.goods_class_name }}</div>
                        <div>
                          {{ scope.row.shop_deposit }}
                        </div>
                        <!-- <div>{{ scope.row.goods_name }}</div> -->
                      </template>
                    </el-table-column>
                    <el-table-column prop="url" label="主图">
                      <template slot-scope="scope">
                        <img
                          style="height:100px"
                          :src="scope.row.goods_img"
                          alt=""
                        />
                      </template>
                    </el-table-column>
                    <el-table-column prop="title" label="商品信息">
                      <template slot-scope="scope">
                        <div
                          style="text-align:center; white-space: nowrap;overflow: hidden;text-overflow:ellipsis;"
                        >
                          {{ scope.row.goods_short_title }}
                        </div>
                        <div>
                          <div>月销量: {{ scope.row.goods_day_num }}</div>
                          <div>
                            佣金比例: {{ scope.row.commission_than }}%
                            <span
                              style="color:#FABC70;border:2px solid #FABC70;font-size:16px;padding:0 3px"
                              >定</span
                            >
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="time" label="结束时间">
                      <template slot-scope="scope">
                        <!-- <span>{{ scope.row.start_time }}</span> <br />至 -->
                        <span>{{
                          scope.row.goods_end_time
                            | formatTime("yyyy-MM-dd hh:mm:ss")
                        }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态">
                      <template slot-scope="scope">
                        <span v-if="scope.row.status == '2'">
                          <el-tag type="success">审核通过</el-tag>
                        </span>
                        <span v-else-if="scope.row.status == 1">
                          <el-tag type="info">待审核</el-tag>
                        </span>
                        <span v-else>
                          <el-tag type="danger">驳回审核</el-tag>
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="title"
                      label="申请人信息"
                      width="120"
                    >
                      <template slot-scope="scope">
                        <el-tooltip placement="right" effect="light">
                          <div slot="content">
                            <div>申请用户账号:{{ scope.row.phone }}</div>
                            <div>
                              <div>团队头像:</div>
                              <div>
                                <el-image
                                  style="width: 100px; height: 100px"
                                  :src="scope.row.team_img"
                                  fit="cover"
                                ></el-image>
                              </div>
                            </div>
                            <div>团队名称:{{ scope.row.team_name }}</div>
                            <div>团队介绍:{{ scope.row.team_desc }}</div>
                            <div>
                              申请推广商品数:{{
                                scope.row.today_sq_num +
                                  "/" +
                                  scope.row.week_sq_num +
                                  "/" +
                                  scope.row.day_sq_num
                              }}
                            </div>
                            <div>
                              申请推广通过率:
                              <span v-if="scope.row.today_sq_num > 0">
                                {{
                                  (
                                    (scope.row.today_success_num /
                                      scope.row.today_sq_num) *
                                    100
                                  ).toFixed(2)
                                }}%/
                              </span>
                              <span v-else>
                                0%/
                              </span>
                              <span v-if="scope.row.week_sq_num > 0">
                                {{
                                  (
                                    (scope.row.week_success_num /
                                      scope.row.week_sq_num) *
                                    100
                                  ).toFixed(2)
                                }}%/
                              </span>
                              <span v-else>
                                0%/
                              </span>
                              <span v-if="scope.row.day_sq_num > 0">
                                {{
                                  (
                                    (scope.row.day_success_num /
                                      scope.row.day_sq_num) *
                                    100
                                  ).toFixed(2)
                                }}%
                              </span>
                              <span v-else>
                                0%/
                              </span>
                            </div>
                            <div>
                              本月 推广商品平均销量:{{
                                Math.round(scope.row.avg_goods_xl)
                              }}
                            </div>
                            <div>
                              本月 推广商品平均领券量 :{{
                                Math.round(scope.row.avg_coupon_num)
                              }}
                            </div>
                          </div>
                          <div class="applyuser">
                            {{ scope.row.phone }}
                          </div>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                    <el-table-column prop="action">
                      <template slot="header">
                        <el-input
                          v-model="searchipt"
                          size="mini"
                          placeholder="请输入商品ID"
                          suffix-icon="el-icon-search"
                          @change="dosearch"
                        />
                      </template>
                      <template slot-scope="scope">
                        <div style="margin-top: 3px;">
                          优惠卷已领取: {{ scope.row.coupon_collar_count }}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="width:100%;text-align:right">
                    <!-- 分页器 -->
                    <!-- @size-change="handleSizeChange" -->
                    <!-- background -->
                    <el-pagination
                      @current-change="handleCurrentChange3"
                      :current-page="currentPage3"
                      :page-size="pagesize"
                      :pager-count="11"
                      layout="total, prev, pager, next, jumper"
                      :total="count3"
                    >
                      <!-- :page-sizes="[100, 200, 300, 400]" -->
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// import { getAdminGoods } from "@/api/local/audit";
import {
  getAdminGoods,
  doRejectGoods,
  doPassGoods,
  userGetGoods
} from "@/api/audit/audit";
import { getReasonList } from "@/api/userinfo/userinfo";
export default {
  filters: {
    formatTime: function(datetime, fmt) {
      var date = new Date(datetime);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          var str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  },
  name: "auditpage",
  data() {
    return {
      changeid: {},
      restaurants: [],
      dialogshow: false,
      reason: "",
      searchipt: "",
      pagesize: 15,
      currentPage: 1,
      count: 0,
      currentPage3: 1,
      count3: 0,
      tabindex: "",
      loading: false,
      activeName: "1",
      tableData: [
        // {
        //   after_coupon_price: "9.00",
        //   avg_coupon_num: 0,
        //   avg_goods_xl: 0,
        //   commission_than: "60.1",
        //   copywriting:
        //     "多型号，多图案，可以选择，玻璃彩绘，凹凸浮雕，正反面放割设计，真机开模，真正360度全包边覆盖，带壳一样可以无线充电~",
        //   coupon_collar_count: 0,
        //   coupon_end_time: 1590422400,
        //   coupon_num: 100000,
        //   coupon_price: "40.00",
        //   coupon_start_time: 1590163200,
        //   coupon_url:
        //     "https://uland.taobao.com/quan/detail?sellerId=2206821296223&activityId=985bc17547314f0482bc32ccfb01f2cf",
        //   create_at: "2020-06-04 15:15:26",
        //   day_sq_num: 3,
        //   day_success_num: 2,
        //   friend_circle: null,
        //   goods_activity: 1,
        //   goods_class_name: "其他",
        //   goods_end_time: 1590422400000,
        //   goods_img:
        //     "http://img.alicdn.com/imgextra/i1/2206821296223/O1CN01rqSZWU1vqBIYHNAbs_!!2206821296223.jpg",
        //   goods_price: "49.00",
        //   goods_url: "https://detail.tmall.com/item.htm?id=610866702451",
        //   goods_yx_img: "",
        //   id: 23,
        //   is_extension: 1,
        //   phone: "17339612793",
        //   sh_id: 29,
        //   shop_deposit: "1000.00",
        //   source_material_url: "",
        //   start_time: 1000,
        //   status: 1,
        //   team_desc: "团队简介",
        //   team_img: "",
        //   team_name: "团队1",
        //   today_sq_num: 2,
        //   today_success_num: 2,
        //   type: 1,
        //   user_id: 5,
        //   week_sq_num: 3,
        //   week_success_num: 2
        // }
      ],
      tableData2: [],
      options: []
    };
  },

  computed: {},
  created() {
    this.getAdminGoods(1, 15);
  },
  mounted() {},
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return this.options;
    },
    handleSelect(item) {
      console.log(item);
      console.log(this.reason);
    },

    closedialog() {
      this.dialogshow = false;
      this.reason = "";
      this.changeid = "";
    },
    doreject() {
      console.log(this.changeid);
      this.reject();
    },
    getReasonList() {
      getReasonList({
        page: 1,
        pagesize: 99999
      })
        .then(res => {
          console.log("理由列表", res);
          // this.options = res.data.data;
          this.options = res.data.data.map(function(obj) {
            var rObj = {};
            rObj.value = obj.err_reason;
            return rObj;
          });
          this.restaurants = this.loadAll();
        })
        .catch(err => {
          console.log(err);
        });
    },
    dosearch() {
      console.log(this.searchipt);
      this.userGetGoods(1, 15, this.searchipt);
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getAdminGoods(this.currentPage, 15);
    },
    handleCurrentChange3(val) {
      console.log(`当前页: ${val}`);
      this.currentPage3 = val;
      this.userGetGoods(this.currentPage3, 15, this.searchipt);
    },
    // 需要审核的
    getAdminGoods(page, pagesize) {
      this.loading = true;
      getAdminGoods({
        page: page,
        pagesize: pagesize
      })
        .then(res => {
          this.loading = false;
          // console.log("审查商品列表", res.result);
          // this.tableData = res.result.data;
          // this.count = res.result.count;
          this.count = res.data.count;
          console.log("审查商品列表", res.data);
          this.tableData = res.data.data;
          for (var k = 0; k < this.tableData.length; k++) {
            this.tableData[k].start_time = parseInt(
              +res.data.data[k].start_time + "000"
            );
            this.tableData[k].goods_end_time = parseInt(
              +res.data.data[k].goods_end_time + "000"
            );
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 自己审核过的商品
    userGetGoods(page, pagesize, goods_id) {
      this.loading = true;
      userGetGoods({
        page: page,
        pagesize: pagesize,
        goods_id: goods_id
      })
        .then(res => {
          this.loading = false;
          console.log("我审查的商品", res.data);
          this.tableData2 = res.data.data;
          this.count3 = res.data.count;
          console.log(this.tableData2);
          for (let k = 0; k < this.tableData2.length; k++) {
            this.tableData2[k].goods_end_time = parseInt(
              +res.data.data[k].goods_end_time + "000"
            );
            // console.log(this.tableData2[k].goods_end_time);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 打开弹窗
    openreason(row) {
      console.log(row);
      this.changeid = row.sh_id;
      this.getReasonList();
      this.dialogshow = true;
    },
    // 驳回
    reject() {
      doRejectGoods({
        id: this.changeid,
        msg: this.reason
      })
        .then(res => {
          console.log(res);
          this.$message({
            type: "success",
            message: "已拒绝"
          });
          this.dialogshow = false;
          this.reason = "";
          console.log(this.changeid);
          for (var i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].sh_id == this.changeid) {
              this.tableData[i].status = 3;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 表头背景色
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 审核通过
    pass(row) {
      console.log("row", row);
      let uid = row.sh_id;
      doPassGoods({
        id: row.sh_id
      })
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("审核通过");
            console.log(uid);
            for (var i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].sh_id == uid) {
                console.log(this.tableData[i]);
                this.tableData[i].status = 2;
              }
            }
          } else {
            this.$message.success(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 导航栏切换
    handleClick(tab) {
      // console.log(tab.index);
      this.tabindex = tab.index;
      if (tab.index == 0) {
        this.getAdminGoods(1, 15);
      } else {
        this.userGetGoods(1, 15);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.auditpage {
  // width: 970px;
  box-sizing: border-box;
  // .auditpage_main::v-deep {
  //   // width: 970px;
  // }
}
</style>
